<template>
  <div>
    <p>count值为 {{ count }}</p>
    <!--↓会影响视图变化-->
    <button @click="count += 1">count+1</button>
    <!--↓经过toRefs后,这样也会影响视图变化-->
    <button @click="add">add</button>
  </div>
</template>

<script>
import { reactive, toRefs } from "@vue/composition-api";

export default {
  setup(props, ctx) {
    /** toRefs() 函数可以将 reactive() 创建出来的响应式对象, 转换为普通的对象, 只不过, 这个对象上的每个属性节点, 都是 ref()类型的响应式数据。 最常见的应用场景如下: */
    const state = reactive({ count: 0, name: "ahhh" });

    console.log(1);
    // 定义自增+1的函数
    const add = () => {
      console.log("state",state);
      console.log("state.count:",state.count);
      state.count += 1;
    };

    return {
      ...toRefs(state),
      add
    };
  }
};
</script>

<style lang="scss" scoped></style>
